import './MonitorA01.scss'
import { useState } from 'react'
import { useRequest } from 'ahooks'
import { Pagination } from 'antd'
import { FrontModalBox } from '../Modal'
import { Http } from '../../../../Common/Api'
import { FlvVideoA01, DaHuaCameraPlayback } from '../../../../Common/Configure/Video'
import { useEffect } from 'react'

const ViewListA01 = {
    1: { width: '100%', height: '100%' },
    2: { width: 'calc(50% - 10px)', height: '100%' },
    3: { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' },
    4: { width: 'calc(50% - 10px)', height: 'calc(50% - 10px)' },
    5: { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' },
    6: { width: 'calc((100% / 3) - 10px)', height: 'calc(50% - 10px)' },
    7: { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' },
    8: { width: 'calc(25% - 10px)', height: 'calc(50% - 10px)' },
    9: { width: 'calc((100% / 3) - 10px)', height: 'calc((100% / 3) - 10px)' },
    10: { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' },
    11: { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' },
    12: { width: 'calc(25% - 10px)', height: 'calc((100% / 3) - 10px)' },
}

// 高点监控
export const MonitorA01 = ({ index, size }) => {
    const [Data, setData] = useState([])
    const [Total, setTotal] = useState(0)

    const [pageIndex, setPageIndex] = useState(index)
    const [pageSize] = useState(size)

    const { runAsync } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            console.log(res)
            setData(res.list)
            setTotal(res.total)
        },
    })
    useEffect(() => {
        runAsync({
            url: 'getTowerChannels',
            data: { pageIndex, pageSize, protocolType: 7, OrderField: 'ChannelName@asc' },
        })
    }, [pageIndex, pageSize, runAsync])

    const onClick = data => {
        const { uuid, channelName, url } = data
        setOptionsCall({ type: 'VideoA01', data: { uuid, url, title: '高点监控 - ' + channelName } })
    }
    const [OptionsCall, setOptionsCall] = useState()
    return (
        <div className="MonitorA01">
            {Data.map(item => (
                <div className="Video" key={item.uuid} style={ViewListA01[Data.length]}>
                    <DaHuaCameraPlayback data={item.url} />
                    {/* <FlvVideoA01 url={item.playUrl} /> */}
                    <div className="Title">{item.channelName}</div>
                    <button className="Options" onClick={() => onClick(item)}>
                        云台控制
                    </button>
                </div>
            ))}
            {Data.length !== 0 && (
                <div className="Pagination">
                    <Pagination
                        total={Total}
                        showTotal={total => `共${total}条记录 -- 当前第${pageIndex}页`}
                        showSizeChanger={false}
                        pageSize={pageSize}
                        current={pageIndex}
                        onChange={setPageIndex}
                    />
                </div>
            )}
            <FrontModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
